<template>
  <div id="myChartChina" style="width:100%;height:500px"></div>
</template>

<script>
  export default {
    name: "real-time-data",
    data: function () {
      return {
        name_title: "",
        subname: "",
        //nameColor: "rgb(55, 75, 113)",
        name_fontFamily: "等线",
        subname_fontSize: 15,
        name_fontSize: 18,
        mapName: "china",
        geoCoordMap: {陕西: [108.95, 34.27]},
        mapData: [
          {
            name: "北京",
            value: 120
          },
          {
            name: "天津",
            value: 42
          },
          {
            name: "河北",
            value: 10
          },
          {
            name: "山西",
            value: 81
          },
          {
            name: "内蒙古",
            value: 47
          },
          {
            name: "辽宁",
            value: 67
          },
          {
            name: "吉林",
            value: 82
          },
          {
            name: "黑龙江",
            value: 6
          },
          {
            name: "上海",
            value: 24
          },
          {
            name: "江苏",
            value: 92
          },
          {
            name: "浙江",
            value: 11
          },
          {
            name: "安徽",
            value: 10
          },
          {
            name: "福建",
            value: 16
          },
          {
            name: "江西",
            value: 91
          },
          {
            name: "山东",
            value: 11
          },
          {
            name: "河南",
            value: 13
          },
          {
            name: "湖北",
            value: 1
          },
          {
            name: "湖南",
            value: 114
          },
          {
            name: "重庆",
            value: 91
          },
          {
            name: "四川",
            value: 12
          },
          {
            name: "贵州",
            value: 62
          },
          {
            name: "云南",
            value: 83
          },
          {
            name: "西藏",
            value: 9
          },
          {
            name: "陕西",
            value: 80
          },
          {
            name: "甘肃",
            value: 56
          },
          {
            name: "青海",
            value: 10
          },
          {
            name: "宁夏",
            value: 18
          },
          {
            name: "新疆",
            value: 67
          },
          {
            name: "广东",
            value: 12
          },
          {
            name: "广西",
            value: 59
          },
          {
            name: "海南",
            value: 14
          }
        ]
      };
    },
    mounted() {
      this.getGeoCoordMap();
      this.drawLine();
    },
    methods: {
      getGeoCoordMap() {
        var that = this;
        var mapFeatures = this.$echarts.getMap(this.mapName).geoJson.features;
        mapFeatures.forEach(function (v) {
          // 地区名称
          var name = v.properties.name;
          // 地区经纬度
          that.geoCoordMap[name] = v.properties.cp;
        });
      },
      convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = this.geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        //alert(JSON.stringify(res));
        return res;
      },
      drawLine() {
        var that = this;
        var myChartContainer = document.getElementById("myChartChina");
        var resizeMyChartContainer = function () {
          myChartContainer.style.width = document.body.offsetWidth / 2 + "px";
        };
        resizeMyChartContainer();
        var myChartChina = that.$echarts.init(myChartContainer);

        // 绘制图表 https://segmentfault.com/q/1010000008776041
        var optionMap = {
          title: {
            text: '全国设备部署数量分布',
            left: "center",
            textStyle: {
              color: "#000",
              fontSize: 13,
            }
          },
          tooltip: {
            trigger: "item",
            formatter(params) {
              var res = params.name + '<br>'
              optionMap.series.map(series => {
                series.data.map(data => {
                  if (data.name == params.name) {
                    res += series.name + ' : ' + data.value[2] + '<br>'
                  }
                })
              })
              return res;
            }
          },
          legend: {
            //orient: 'vertical',  //垂直显示还是横着显示
            left: 'left',
            // 强制设置图形为圆
            icon: 'circle',
            data: ['IEQ', 'PMS', 'OPT'],
          },
          visualMap: [
            {
              type: "piecewise",  // 定义为分段型
              show: true,        //是否显示
              calculable: true,	 //是否显示拖拽用的手柄
              pieces: [          //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
                {min: 101},
                {min: 51, max: 100},
                {min: 21, max: 50},
                {min: 11, max: 20},
                {min: 0, max: 10},
              ],
              inRange: {       //定义 在选中范围中 的视觉元素
                color: ["#34b7c3", "#12a8f6", "#ffd800", "#ff6c00", "#ff0050"],
              },
              itemWidth: 20,       //图形的宽度，即长条的宽度
              itemHeight: 10,      //图形的高度，即长条的高度。
              itemGap: 8,          //每两个图元之间的间隔距离，单位为px
              textGap: 5,          //两端文字主体之间的距离，单位为px
              itemSymbol: "circle", //默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
              textStyle: {
                color: "#000",
                fontSize: 12,
              },

            },
          ],
          geo: {
            map: "china",
            roam: true,// 是否开启鼠标缩放和平移漫游
            text: ['高', '低'],
            //滚轮缩放的极限控制
            scaleLimit: {
              min: 1,
              max: 200
            },
            zoom: 1.24, //地图放大比例
            center: [105, 36], // 调整地图位置
            showLegendSymbol: false, // 存在legend时显示
            //图形上的文本标签
            label: {
              //默认效果
              normal: {
                show: true, //是否显示省份文字
                textStyle: {
                  color: '#eaf7f3', //地图中省份字体颜色
                  fontSize: 13
                }
              },
              //鼠标悬浮效果
              emphasis: {
                show: true, //是否显示省份文字
                textStyle: {
                  color: '#fff',
                  fontSize: 13
                }
              }
            },
            itemStyle: {
              // 普通样式。
              normal: {
                areaColor: "#3995e5",//地图区域背景色
                borderColor: "#FFF", ////图形的描边颜色
                borderWidth: 0.5
              },
              // 高亮样式。
              emphasis: {
                areaColor: "green", //鼠标悬浮区域背景色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 1,
                borderWidth: 0
              }
            }
          },
          series: [
            {
              name: 'IEQ',
              type: 'map',
              geoIndex: 0,
              data: that.convertData(that.mapData)
            }, {
              name: 'PMS',
              type: 'map',
              geoIndex: 0,
              data: that.convertData([{name: '北京', value: 99},
                {name: '内蒙古', value: 37}])
            }, {
              name: 'OPT',
              type: 'map',
              geoIndex: 0,
              data: that.convertData([{name: '北京', value: 9},
                {name: '内蒙古', value: 3}])
            }
          ]
        };
        myChartChina.setOption(optionMap);
        window.onresize = function () {
          resizeMyChartContainer();
          myChartChina.resize();
        };
      }
    }
  };
</script>

<style scoped>
</style>
